<script>
import { reactive, ref, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import ImageList from '@/views/NewRoom/NRDetails/ImageList/ImageList.vue'
import Zoom from '@/views/NewRoom/NRDetails/Zoom/Zoom.vue'
export default {
  name: 'SearchNav',
  components: {
    Zoom,
    ImageList
  },
  setup () {
    const router = useRouter()
    const route = useRoute()
    const routeParams = ref('/nrdetails')
    const isCrumb = ref(route.matched[0].path === routeParams.value)
    // 选择城市
    const city = ref(route.query.city || '')
    //  城市列表
    const options = [
      {
        value: '广州',
        city: 'Option1'
      },
      {
        value: '上海',
        city: 'Option2'
      },
      {
        value: '深圳',
        city: 'Option3'
      },
      {
        value: '北京',
        city: 'Option4'
      },
      {
        value: '杭州',
        label: 'Option5'
      }
    ]
    // 城市切换
    const changeCity = () => {
      if (city.value) {
        console.log('城市切换')
      }
    }
    // 选择菜单
    const isShow = ref(0)
    // 控制区域地铁出现
    const active = (idx) => {
      if (isShow.value === idx) {
        isShow.value = 0
      } else {
        isShow.value = idx
      }
    }
    // 更多自定义
    const limit = ref(false)
    // 更多自定义
    const isLimit = () => {
      limit.value = true
    }
    // 放大镜与底部轮播图片
    const skuImages = reactive({
      skuImageList: [
        { id: 1, imgUrl: require('@/assets/images/1-1.png'), text: 'VR看房' },
        { id: 2, imgUrl: require('@/assets/images/1-2.png'), text: '楼盘图' },
        { id: 3, imgUrl: require('@/assets/images/1-3.png'), text: '沙盘图' },
        { id: 4, imgUrl: require('@/assets/images/1-4.png'), text: '位置图' },
        { id: 5, imgUrl: require('@/assets/images/1-5.png'), text: 'VR看房' },
        { id: 5, imgUrl: require('@/assets/images/1-6.png'), text: 'VR看房' }
      ]
    })
    // 跳转到详情页
    const goNRDetails = (event) => {
      if (city.value) {
        const location = { name: 'NRDetails', query: { city: city.value, area: event } }
        if (route.params) {
          location.params = route.params
          router.push(location)
        }
      }
    }
    return {
      city,
      options,
      isShow,
      route,
      limit,
      isCrumb,
      ...toRefs(skuImages),
      goNRDetails,
      changeCity,
      isLimit,
      active
    }
  }
}

</script>
<template>
  <!-- 搜索 -->
  <div class="search">
    <!-- logo -->
    <div class="logo"><img src="" alt="Logo">蜗牛找房</div>
    <!-- 下拉选择城市 -->
    <div class="select">
      <el-select v-model="city" placeholder="城市" clearable size='large' width=200
        @change="changeCity">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
          :disabled="item.disabled" />
      </el-select>
    </div>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb v-if="isCrumb">
        <el-breadcrumb-item :to="{path:'/home'}">蜗牛找房</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/newroom'}">新房</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/newroom',query:{city:route.query.city}}">
          {{route.query.city}}楼盘
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/nrdetails'}">{{route.query.area}}楼盘</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 搜索框 -->
    <div class="search_ipt">
      <input type="text" placeholder="请试试输入楼盘名、区域或地铁线">
      <button>
        <el-icon color="#ffffff" :size="20">
          <Search />
        </el-icon>
      </button>
    </div>
  </div>
  <!-- nav导航选择菜单 -->
  <nav class="nav" v-if="!isCrumb">
    <ul class="menu">
      <!-- 选择区域地铁 -->
      <li class="menu_item">
        <h5>
          位置
        </h5>
        <div>
          <div class="collapse">
            <div @click="active(1)">按区域
              <el-icon>
                <ArrowDown />
              </el-icon>
            </div>
            <div @click="active(2)">按地铁
              <el-icon>
                <ArrowDown />
              </el-icon>
            </div>
          </div>
        </div>
      </li>
      <!-- 区域 -->
      <ul class="collapse_show" v-if="isShow===1" @click="goNRDetails('增城')">
        <li class="show_li">增城</li>
        <li class="show_li">黄埔</li>
        <li class="show_li">广州周边</li>
        <li class="show_li">番禺</li>
        <li class="show_li">白云</li>
        <li class="show_li">南沙</li>
        <li class="show_li">花都</li>
        <li class="show_li">天河</li>
        <li class="show_li">荔湾</li>
        <li class="show_li">从化</li>
        <li class="show_li">越秀</li>
      </ul>
      <!-- 地铁 -->
      <ul class="collapse_show" v-if="isShow===2">
        <li class="show_li">1号线</li>
        <li class="show_li">2号线</li>
        <li class="show_li">3号线</li>
        <li class="show_li">4号线</li>
        <li class="show_li">5号线</li>
        <li class="show_li">6号线</li>
        <li class="show_li">7号线</li>
        <li class="show_li">8号线</li>
        <li class="show_li">9号线</li>
        <li class="show_li">10号线</li>
        <li class="show_li">11号线</li>
      </ul>
      <!-- 单价 -->
      <li class="menu_item">
        <h5>单价</h5>
        <div class="unit_price">
          7000元/m²以下
        </div>
        <div class="unit_price">
          7000元/m²以下
        </div>
        <div class="unit_price">
          7000元/m²以下
        </div>
        <div class="unit_price">
          7000元/m²以下
        </div>
        <div class="unit_price">
          7000元/m²以下
        </div>
        <div class="unit_price" v-if="!limit">
          <div class="custom" @click="isLimit">+更多及自定义</div>
        </div>
        <div class="unit_price" v-if="limit">
          <div class="money_ipt">
            <input type="text">
            <div>-</div>
            <input type="text">
            <div>元</div>
          </div>
        </div>
      </li>
      <!-- 总价 -->
      <li class="menu_item">
        <h5>总价</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          <div class="money_ipt">
            <input type="text">
            <div>-</div>
            <input type="text">
            <div>元</div>
          </div>
        </div>
      </li>
      <!-- 面积 -->
      <li class="menu_item">
        <h5>面积</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          <div class="custom">+更多及自定义</div>
        </div>
      </li>
      <!-- 状态 -->
      <li class="menu_item">
        <h5>状态</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
      <!-- 户型 -->
      <li class="menu_item">
        <h5>户型</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
      <!-- 物业 -->
      <li class="menu_item">
        <h5>物业</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
      <!-- 开盘 -->
      <li class="menu_item">
        <h5>开盘</h5>
        <div class="total_price">
          全部已开盘
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
      <!-- 装修 -->
      <li class="menu_item">
        <h5>装修</h5>
        <div class="total_price">
          全部
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
      <!-- 特色 -->
      <li class="menu_item">
        <h5>特色</h5>
        <div class="total_price">
          VR看房
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
        <div class="total_price">
          7000元/m²以下
        </div>
      </li>
    </ul>
  </nav>
  <!-- 详情页数据展示 -->
  <div class="details_container" v-if="isCrumb">
    <div class="banner"><img src="" alt=""></div>
    <div class="main_con">
      <!-- 左侧放大镜区域 -->
      <div class="preview_wrap">
        <!--放大镜效果-->
        <Zoom :skuImageList="skuImageList" />
        <!-- 小图列表 -->
        <ImageList :skuImageList="skuImageList" />
      </div>
      <!-- 右侧选择区域布局 -->
      <div class="info_wrap">
        <div class="info_title">
          <div>广州敏捷绿湖首府</div>
          <ul>
            <li>在售</li>
            <li>住宅</li>
          </ul>
        </div>
        <div class="info_name">别名：广州敏捷绿湖首府六期,绿湖首府,敏捷绿湖首府</div>
        <ul class="info_type">
          <li>
            特价房源
          </li>
          <li>
            特价房源
          </li>
          <li>
            特价房源
          </li>
          <li>
            特价房源
          </li>
        </ul>
        <div class="info_address">
          <div>项目地址</div>
          <div>石滩镇新城大道石滩中学北侧400米</div>
        </div>
        <div class="info_house_type">
          <div>楼盘户型</div>
          <ul>
            <li>二居室(1)</li>
            <li>三居室(4)</li>
            <li>四居室(1)</li>
            <li>全部户型</li>
          </ul>
        </div>
        <div class="info_price">
          <div class="info_consult_price">参考均价</div>
          <div class="consult_price">
            <div>
              <span style="font-size:30px;">13000</span>
              <span>元/平(单价) </span>
            </div>
            <div>
              <span style="font-size:30px;">13000</span>
              <span>万/套(总价) </span>
            </div>
          </div>
        </div>
        <div class="info_phone">
          <div class="phone_img">
            <img src="" alt="">
          </div>
          <div class="phone_content">
            <div>400 810 0343</div>
            <div>致电售楼处，了解更多优惠信息</div>
          </div>
          <div class="phone_right">致电售楼处</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang='less'>
.search {
  display: flex;
  align-items: center;
  width: 1180px;
  height: 46px;
  margin: 24px auto;
  .logo {
    width: 157px;
    height: 32px;
    line-height: 32px;
    border-right: 2px solid #bababa;
    img {
      margin-right: 2px;
    }
    margin-right: 28px;
  }
  .select {
    width: 100px;
  }
  .breadcrumb {
    margin-left: 30px;
    color: #9399a5;
  }
  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #9399a5;
  }
  .search_ipt {
    display: flex;
    margin-left: 100px;
    width: 460px;
    height: 46px;
    input {
      width: 80%;
      height: 46px;
      border: 1px solid rgb(237, 237, 237);
      border-right: none;
      border-radius: 6px 0 0 6px;
      text-indent: 2em;
    }
    button {
      width: 46px;
      height: 100%;
      background-color: #3072f6;
      // border: 1px solid rgb(237, 237, 237);
      border: none;
      border-radius: 0 6px 6px 0;
    }
  }
}
.nav {
  width: 1180px;
  padding: 25px 52px 5px 24px;
  margin: 0 auto 40px;
  background-color: rgb(250, 250, 250);
  font-size: 12px;
  color: #000;
  box-shadow: 0px 4px 10px 0px gray;
  -moz-user-select: none;
  -o-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  .menu {
    .menu_item {
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 19px;
      color: #666666;
      height: 15px;
      line-height: 15px;
      h5 {
        color: #101d37;
        margin-right: 24px;
        font-size: 12px;
      }
      .collapse {
        display: flex;
        background-color: rgb(250, 250, 250);

        div {
          cursor: pointer;
          margin-right: 20px;
          i {
            margin-left: 5px;
          }
        }
      }
      .unit_price,
      .total_price {
        width: 154px;
        .money_ipt {
          display: flex;
          line-height: 20px;
          div:nth-child(2) {
            margin: 0 5px;
          }
          div:nth-child(2) {
            margin: 0 5px;
          }
          input {
            width: 60px;
            height: 20px;
            border: 1px solid rgb(237, 237, 237);
            border-radius: 5px;
          }
        }
        .custom {
          cursor: pointer;
          color: #3072f6;
        }
      }
    }
    .collapse_show {
      display: flex;
      background-color: rgb(250, 250, 250);
      margin: 25px 0 24px 72px;
      .show_li {
        margin-right: 24px;
      }
    }
  }
}
.details_container {
  width: 1180px;
  margin: 0 auto;
  .banner {
    width: 1180px;
    height: 160px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .main_con {
    margin: 24px 0 64px 0;
    display: flex;
    .info_wrap {
      .info_title {
        display: flex;
        align-items: center;
        div {
          font-size: 30px;
          font-weight: 700;
          color: #101d37;
          margin-right: 16px;
        }
        ul {
          display: flex;
          li {
            color: #fff;
            font-size: 12px;
            border-radius: 4px;
            padding: 6px 8px;
            margin-right: 8px;
          }
          li:nth-child(1) {
            background-color: #5f94ff;
          }
          li:nth-child(2) {
            background-color: #fb9252;
          }
        }
      }
      .info_name {
        margin: 8px 0;
        color: #9399a5;
        font-size: 12px;
      }
      .info_type {
        display: flex;
        li {
          font-size: 12px;
          padding: 7px 20px;
          background-color: rgba(147, 153, 165, 0.1);
          margin-right: 10px;
          color: #9399a5;
        }
      }
      .info_address {
        display: flex;
        margin: 32px 0 24px;
        font-size: 14px;
        color: #9399a5;
        div:nth-child(1) {
          color: #101d37;
          margin-right: 32px;
        }
        div:nth-child(2) {
          color: #101d37;
        }
      }
      .info_house_type {
        display: flex;
        color: #3072f6;
        div {
          font-size: 14px;
          color: #9399a5;
          margin-right: 32px;
        }
        ul {
          display: flex;
          li {
            margin-right: 16px;
          }
        }
      }
      .info_price {
        display: flex;
        margin: 24px 0 80px;
        .info_consult_price {
          color: #9399a5;
          margin-right: 32px;
          font-size: 14px;
        }
        .consult_price {
          color: #f15044;
          display: flex;
          font-size: 16px;
          div:nth-child(1) {
            margin-right: 16px;
          }
        }
      }
      .info_phone {
        display: flex;
        align-items: center;
        padding: 28px 38px 28px 42px;
        background-color: rgba(48, 114, 246, 0.1);
        border: 1px solid rgba(48, 114, 246, 0.8);
        .phone_img {
          width: 60px;
          height: 60px;
          border-radius: 50% 50%;
          background-color: #3072f6;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50% 50%;
          }
        }
        .phone_content {
          width: 229px;
          height: 61px;
          color: #3072f6;
          margin: 0 60px 0 19px;
          div:nth-child(1) {
            font-size: 35px;
            height: 42px;
            line-height: 42px;
            font-weight: 500;
          }
          div:nth-child(2) {
            font-size: 16px;
          }
        }
        .phone_right {
          width: 108px;
          height: 39px;
          text-align: center;
          line-height: 39px;
          background-color: #3072f6;
          color: #fff;
        }
      }
    }
  }
}
</style>
